<template>
  <div>
    <base-header text="选择遥控设备类型"></base-header>
    <div style="background: rgba(0, 0, 0,0.2);">
      <div class="main-body"  :style="{height: height + 'px'}" >
        <div v-if="list.length != 0 && item.tid == 7" class="telecontroller-item" :class="{last: (index + 1) % 4 === 0}"
            :style="{width: itemWidth + 'px',height: itemWidth + 'px'}" @click="itemClick(item)" 
            v-for="(item,index) in list" :key="index">
          <div v-show="showMinus"  class="t-e-div1" ></div>
          <div :style="styleList[item.tid]" style="width: 100%;height: 100%;background-size: 100% 100%;"></div>
        </div>
      </div>
      <div class="detailsBefor">

      </div>
     
    </div>
  </div>
</template>
<script>
  import BaseHeader from "../components/BaseHeader.vue";

  export default {
    components: {BaseHeader},
    data() {
      return {
        //@touchstart="touchstart3"   @click.stop="clickMinus"  @click="disapperMinus"
        height: window.innerHeight - (280*(window.innerWidth/1080)),
        itemWidth: (window.innerWidth - 70) / 4,
        showMinus:false,
        setTimeOutMinus:'',
        list: [
        //  {
        //    name: '空调',
        //    tid: 7
        //  },
        //  {
        //    name: '电视机',
        //    tid: 1
        //  }
        ],
        styleList:{
          7:{
            backgroundImage: 'url(' + require('../assets/AirConditioner.png') + ')'
          }
        }
      }
    },
    computed: {
      platformInfo: function() {
        return {
          isAndroid: navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1,
          isiOS : !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        }
      }
    },
    created() {
      window.typeList = this.typeList
    },
    mounted() {
      if(this.platformInfo.isiOS){
         window.webkit.messageHandlers.getTypeList.postMessage('')
      }else{
        window.android.getTypeList()
      }
    },
    methods: {
      itemClick(v) {
        if (v.tid === 7) {
          this.$router.push({name: 'SelectBrand', query: {tid: v.tid}})
        }
      },
      typeList(v) {
        this.list = v.typeList
      },

    }
  }
</script>
<style scoped>
  .telecontroller-item {
    position: relative;
    display: inline-block; 
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .telecontroller-item .t-e-div1{
    width: 0.62rem;
    height: 0.62rem;
    background: url(../assets/jianhao.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    background-color: pink;
    border-radius: 0.62rem;
    right: -5px;
    top: -5px;  
    z-index: 10; 
  }
  .telecontroller-item.last{
    margin-right: 0;
  }
  .main-body{
    overflow: auto;
    padding: 0.55rem 0.4rem 0 0.4rem;
  }
  .detailsBefor{
    height: 1px;
    width: 100%;
    background: url(../assets/changxixian.png) no-repeat 0 0;
    background-size:100% 1px ;
  }
 

</style>
